<template>
        <el-tabs>
            <el-tab-pane label="总览">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card class="box-card">
            <div class="personal-info">
              <h2>{{ residentInfo.residentFiles_Name }}<el-tag style="margin-left: 20px;" size="small" type="success" class="ml-2">{{ residentInfo.manageLevel }}</el-tag></h2>
              <p class="basic-info">
                <span>{{ residentInfo.sex }}{{ residentInfo.age }}岁</span>
                <span class="divider">|</span>
                <span>身份证号：{{ residentInfo.idCard }}</span>
                <span class="divider">|</span>
                <span>电话：{{ residentInfo.phone }}</span>
              </p>
              
              <div class="tags-section">
                <h3>慢病标签</h3>
                <div>
                  <el-tag 
                    v-for="(item, index) in chronicDiseases" 
                    :key="index" 
                    :type="index === 0 ? 'danger' : 'warning'"
                    class="mr-2">
                    {{ item }}
                  </el-tag>
                </div>
              </div>

              <div class="risk-assessment mt-4">
                <h3>风险评估 </h3>
                <el-alert
                  title="脑卒中高危" 
                  type="warning" 
                  :closable="false" />
              </div>
            </div>
          </el-card>

          <el-card class="box-card mt-4">
            <div class="health-profile">
              <div class="header">
                <h3>健康概况 </h3>
              </div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="health-item">
                    <label>身高：</label>
                    <span>{{ residentInfo.height }} CM</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="health-item">
                    <label>体重：</label>
                    <span>{{ residentInfo.weight }} KG</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="health-item">
                    <label>BMI：</label>
                    <span>{{ residentInfo.bmi }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="health-item">
                    <label>是否吸烟：</label>
                    <span>{{ residentInfo.ifSmoke ? '是' : '否' }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="health-item">
                    <label>是否饮酒：</label>
                    <span>{{ residentInfo.ifDrinkWine ? '是' : '否' }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="health-item">
                    <label>是否运动：</label>
                    <span>{{ residentInfo.ifSport ? '是' : '否' }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="box-card">
            <div class="compliance">
              <h3>依从性</h3>
              <el-tag type="success" effect="dark" size="large">优秀</el-tag>
            </div>
            
            <div class="service-info mt-6">
              <h3>服务概况</h3>
              <div class="service-item">
                <label>签约日期：</label>
                <span>{{ residentInfo.sign_StartTime||'暂时还未签约' }}</span>
              </div>
              <div class="service-item">
                <label>到期日期：</label>
                <span>{{ residentInfo.sign_EndTime||'暂时还未签约' }}</span>
              </div>
              <div class="service-item">
                <label>服务包：</label>
                <el-tag type="info">{{ residentInfo.servicePack||'高血压基础管理包' }}</el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-tab-pane>

       <el-tab-pane label="健康监测" >
        <el-row :gutter="20">
    <el-col :span="4">
      <el-menu class="side-menu" mode="vertical">
        <span><b>体征检测</b></span>
        <el-menu-item index="bmi">BMI</el-menu-item>
        <el-menu-item index="bloodPressure" style="color: #409eff; font-weight: bold;">血压</el-menu-item>
        <el-menu-item index="bloodSugar">血糖</el-menu-item>
        <el-menu-item index="bloodLipid">血脂</el-menu-item>
        <el-menu-item index="hemoglobin">血红蛋白</el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="20">
      <div class="monitor-trend">
        <div class="time-filter">
            <span><b>监测趋势</b></span><br/>
          <el-button size="small" type="primary" plain>近1周</el-button>
          <el-button size="small" type="primary" plain>近2周</el-button>
          <el-button size="small" type="primary" plain>近30天</el-button>
          <el-button size="small" type="primary" plain>指定日期</el-button>
          <el-form :inline="true" :model="jkjcinfo" class="demo-form-inline">
    <el-form-item label="签约时间">
      <el-date-picker
        v-model="jkjcinfo.StartTime"
        type="date"
        placeholder="/年/月/日"
        clearable/>
        <span>至</span>
        <el-date-picker
        v-model="jkjcinfo.EndTime"
        type="date"
        placeholder="/年/月/日"
        clearable/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="fetchChartData">查询</el-button>
    </el-form-item>
  </el-form>
        </div>
        <!--折线图-->
        <el-card>
    <div id="trend-chart" style="width: 100%; height: 400px"></div>
    <el-skeleton :loading="loading" animated :count="3"/>
    <el-alert 
      v-if="error"
      title="数据加载失败"
      type="error"
      :description="errorMessage"
      show-icon
      closable
    />
  </el-card>
      </div>
      <span><b>监测记录</b></span>
      <el-table 
        class="monitor-record" 
        :data="bloodPressureRecords" 
        style="width: 100%;">      
        <el-table-column 
          prop="createTime" 
          label="测量时间" 
          width="300">
          <template v-slot="scoped">
            {{ scoped.row.createTime.substring(0, 10)}}
          </template>
        </el-table-column>
        <el-table-column 
          prop="systolicPressure" 
          label="收缩压" 
          width="300"
        ></el-table-column>
        <el-table-column 
          prop="diastolicPressure" 
          label="舒张压" 
          width="300"
        ></el-table-column>

      </el-table>
    </el-col>
        </el-row>
       </el-tab-pane>

       <el-tab-pane label="慢病诊疗" >

      <div class="common-layout">
    <el-container>
      <el-aside width="355px">
        <div class="header">
      <span class="title"><b>诊疗记录</b></span>
      <el-button type="primary" class="add-btn" @click="dialogFormVisible = true">+ 新增诊疗记录</el-button>
    </div>
    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa' }"
      stripe>
      <el-table-column type="selection" width="55" />
      
      <el-table-column prop="recordDate" label="日期" width="100">
        <template #default="{ row }">
          {{ formatDate(row.recordDate) }}
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag
            :type="row.status === '进行中' ? 'primary' : 'success'"
            effect="plain">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column><br/>

      <el-table-column prop="hospital" label="医院" width="100"/>
    </el-table>
<!--添加记录的弹窗-->
<el-dialog v-model="dialogFormVisible" title="添加诊疗记录" width="500" center draggable>
    <el-form :model="JLform">
      <el-form-item label="医院" :label-width="formLabelWidth">
        <el-input v-model="JLform.hospital" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-input v-model="JLform.status" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="AddJL()">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
      </el-aside>
      <el-container>
        <el-header style="margin-bottom: 300px;">
            <span><b>就诊信息</b></span>

            <el-form :model="JZform" label-width="auto" style="max-width: 600px">
    <el-form-item label="西医诊断">
      <el-input v-model="JZform.westernMedicineDiagnosis" />
    </el-form-item>
    <el-form-item label="建议">
      <el-input v-model="JZform.suggestion" />
    </el-form-item>
    <el-form-item label="体征">
      <el-input v-model="JZform.physicalsigns" />
    </el-form-item>
    <el-form-item label="检验">
      <el-input v-model="JZform.examinations" />
    </el-form-item>
    <el-form-item label="检查">
      <el-input v-model="JZform.inspections" />
    </el-form-item>
    <el-form-item label="处方">
      <el-input v-model="JZform.prescriptions" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加就诊信息</el-button>
      <el-button type="success" @click="quxiao">取消</el-button>
    </el-form-item>
            </el-form>

        </el-header>
        <el-main style="margin-top: 50px;">
            <span><b>复诊计划</b></span>
            <Br/>
            <el-button type="primary" class="add-btn" @click="FZdialogFormVisible = true">+ 复诊</el-button>       
            <!--添加复诊计划的弹窗-->
<el-dialog v-model="FZdialogFormVisible" title="添加复诊计划" width="500" center draggable>
    <el-form :model="FZJLform">
      <el-form-item label="复诊科室" :label-width="formLabelWidth">
        <el-input v-model="FZJLform.followUpDepartment" autocomplete="off" />
      </el-form-item>
      <el-form-item label="复诊目的" :label-width="formLabelWidth">
        <el-input v-model="FZJLform.followUpPurpose" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="FZdialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="AddFZJH()">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog> 
  <!--复诊计划-->    
            <el-table
      :data="FZtableData"
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa' }"
      stripe>
      <el-table-column type="selection" width="55" />     
      <el-table-column prop="followUpPlanId" label="ID" width="150"/>
      <el-table-column prop="suggestedFollowUpTime" label="建议复诊时间" width="300">
        <template #default="{ row }">
          {{ formatDate(row.suggestedFollowUpTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="followUpDepartment" label="复诊科室" width="300"/>
      <el-table-column prop="followUpPurpose" label="复诊目的" width="300"/>
      <el-table-column  label="操作" width="300">
        <template #default="{ row }">
          <el-button type="danger" @click="DelFZJH(row.followUpPlanId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
        </el-main>
      </el-container>
    </el-container>
      </div>

       </el-tab-pane>

       <el-tab-pane label="签约信息" >
        <span><b>签约信息</b></span>
        <div class="common-layout">
    <el-container>
      <el-header style="height: 250px;">
        <el-row :gutter="20">
            <div class="service-info mt-6">
              <div class="service-item">
                <label>签约日期：</label>
                <span>{{qianyueinfo.sign_StartTime  }}</span>
              </div>
              <div class="service-item">
                <label>服务日期：</label>
                <span>{{qianyueinfo.sign_StartTime  }}--{{qianyueinfo.sign_EndTime  }}</span>
              </div>
              <div class="service-item">
                <label>签约团队：</label>
                <span>{{qianyueinfo.teamName  }}</span>
              </div>
              <div class="service-item">
                <label>主管医生:</label>
                <span>{{qianyueinfo.doctor  }}</span>
              </div>
              <div class="service-item">
                <label>管理慢病:</label>
                <span>{{ qianyueinfo.manageNCD }}</span>
              </div>
              <div class="service-item">
                <label>管理级别:</label>
                <span>{{ qianyueinfo.manageLevel }}</span>
              </div>
              <div class="service-item">
                <label>签约凭证:</label>
                <span>{{qianyueinfo.proof ||'暂时还未有' }}</span>
              </div>
            </div>
        </el-row>
      </el-header>
      <el-main>
        <span><b>服务包</b></span>
        <!--服务包-->
        <el-table
      :data="FWtableData"
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa' }"
      stripe>
      <el-table-column type="selection" width="55" />     
      <el-table-column prop="servicesPack_Id" label="ID" width="150"/>
      <el-table-column prop="servicesPack_Name" label="服务名称" width="300"/>
      <el-table-column prop="cost" label="费用" width="300"/>
      <el-table-column  label="操作" width="300">
        <template #default="{ row }">
          <el-button type="primary">查看服务项目</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--绑定设备-->
    <span><b>--绑定设备--</b></span>
    <el-table
      :data="SBtableData"
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa' }"
      stripe>
      <el-table-column type="selection" width="55" />     
      <el-table-column prop="id" label="ID" width="150"/>
      <el-table-column prop="device_Name" label="设备名称" width="300"/>
      <el-table-column prop="device_SN" label="设备SN号" width="300"/>
      <el-table-column prop="bind_Time" label="绑定时间" width="300"/>
      <el-table-column prop="bind_Status" label="状态" width="300">
        <template #default="{ row }">
          <el-tag v-if="row.bind_Status == 1">已绑定</el-tag>
          <el-tag v-else>未绑定</el-tag>
        </template>
      </el-table-column>
      <el-table-column  label="操作" width="300">
        <template #default="{ row }">
          <el-button type="primary">解绑</el-button>
        </template>
      </el-table-column>
    </el-table>
      </el-main>
    </el-container>
  </div>
       </el-tab-pane>

       </el-tabs>
    
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { onMounted, reactive, ref,watch } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { regionData } from "element-china-area-data";//引入
import { useCounterStore } from '@/stores/counter';
import type { TreeInstance } from 'element-plus'
import { id } from 'element-plus/es/locales.mjs';
const apiUrl = import.meta.env.VITE_APP_API_URL;
//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();
const route = useRoute();
const formLabelWidth = '140px'
const residentInfo = reactive<any>({});
const chronicDiseases = reactive<string[]>([]);
const ResidentFiles_Id = ref(0);

//#region 总览
// 转换慢病数据
const transformChronicDiseases = (data: any) => {
  const diseases = [];
  if (data.hypertension === 2) diseases.push('高血压');
  if (data.diabetes === 1) diseases.push('2型糖尿病');
  return diseases;
};
// 获取居民档案详情
const getResidentDetail = async () => {
    ResidentFiles_Id.value = route.query.residentFiles_Id as unknown as number;
 
    await axios.get(
      apiUrl+`/T7/ResidentFiles/GetResidentFilesDetail`,{
        params: {
          ResidentFiles_Id: ResidentFiles_Id.value
        }
      }
    ).then(response => {
        if (response.data.code === 210) {
          Object.assign(residentInfo, response.data.data);
          chronicDiseases.splice(0, chronicDiseases.length, ...transformChronicDiseases(response.data.data));
        } else {
          ElMessage.error(response.data.msg);
        }
})

}
//#endregion

//#region 健康监测
const bloodPressureRecords:any = reactive<any[]>([]);
const jkjcinfo=reactive({
  StartTime:"",
  EndTime:""
})

//折状图
interface BloodPressureData {
  createTime: string
  systolicPressure: number
  diastolicPressure: number
}

const chartData = ref<{
  dates: string[]
  systolic: number[]
  diastolic: number[]
}>({
  dates: [],
  systolic: [],
  diastolic: []
})

const loading = ref(false)
const error = ref(false)
const errorMessage = ref('')
let chartInstance: echarts.ECharts | null = null

const formatDate1 = (isoString: string) => {
  try {
    const date = new Date(isoString)
    return `${date.getMonth() + 1}-${date.getDate()}`
  } catch {
    return isoString.split('T')[0]
  }
}
// 获取图表数据和检测数据
const fetchChartData = async () => {
  try {
    loading.value = true
    error.value = false

    // 处理用户ID参数
    const userId = Number(route.query.residentFiles_Id) || 0
    if (!userId) throw new Error('缺少用户ID参数')

    // 发送请求
    const response = await axios.get(
      apiUrl+'/T7/HealthMonitoring/GetBloodPressure',
      apiUrl+'/T7/HealthMonitoring/GetBloodPressure',
      {
        params: { UserId: userId, StartTime:jkjcinfo.StartTime,
          EndTime:jkjcinfo.EndTime },
        headers: { 'Content-Type': 'application/json' }
      }
    )
      if(response.data.code === 210)
      {
        bloodPressureRecords.splice(0, bloodPressureRecords.length, ...response.data.data);
      }
    // 检查业务状态码
    if (response.data.code !== 210) {
      throw new Error(response.data.msg || '服务器返回未知错误')
    }

    // 验证数据结构
    const responseData = response.data.data
    if (!Array.isArray(responseData)) {
      throw new Error('无效的数据格式')
    }

    // 转换数据格式
    chartData.value = {
      dates: responseData.map(item => 
        formatDate1(item.createTime) // 日期格式化
      ),
      systolic: responseData.map(item => {
        if (typeof item.systolicPressure !== 'number') {
          throw new Error('无效的收缩压数据')
        }
        return item.systolicPressure
      }),
      diastolic: responseData.map(item => {
        if (typeof item.diastolicPressure !== 'number') {
          throw new Error('无效的舒张压数据')
        }
        return item.diastolicPressure
      })
    }

  } catch (err: any) {
    error.value = true
    errorMessage.value = `错误: ${err.message}`
    ElMessage.error(`数据加载失败: ${err.message}`)
  } finally {
    loading.value = false
  }
}


//折线图
const initChart = () => {
  const chartDom = document.getElementById('trend-chart')
  if (!chartDom) return

  // 清理旧实例
  if (chartInstance) {
    chartInstance.dispose()
  }

  // 初始化图表
  chartInstance = echarts.init(chartDom)
  
  const option = {
    xAxis: {
      type: 'category',
      data: chartData.value.dates,
      width: '',
      axisLabel: {
        formatter: (value: string) => value.replace('T', ' ')
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} mmHg'
      },
      min: (value: { min: number }) => Math.max(0, value.min - 10),
      max: (value: { max: number }) => value.max + 10
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any[]) => {
        return params.map(item => `
          ${item.marker} ${item.seriesName}<br/>
          时间: ${item.name}<br/>
          数值: ${item.value} mmHg
        `).join('')
      }
    },
    series: [
      {
        name: '收缩压',
        type: 'line',
        data: chartData.value.systolic,
        smooth: true,
        color: '#4CAF50',
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: { width: 5 }
      },
      {
        name: '舒张压',
        type: 'line',
        data: chartData.value.diastolic,
        smooth: true,
        color: '#2196F3',
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: { width: 5 }
      }
    ],
    dataZoom: [{
      type: 'inside',
      start: 0,
      end: 100
    }]
  }

  chartInstance.setOption(option)
  
  // 响应式处理
  const resizeHandler = () => chartInstance?.resize()
  window.addEventListener('resize', resizeHandler)
  
}


// 深度监听数据变化
watch(chartData, (newVal) => {
  if (newVal.dates.length > 0) {
    initChart()
  }
}, { deep: true })

//#endregion

//#region 慢病诊疗
// 慢病诊疗记录表格数据
const tableData = ref([])

// 获取慢病诊疗记录数据
const fetchData = async () => {

    ResidentFiles_Id.value = route.query.residentFiles_Id as unknown as number;
    await axios.get(apiUrl+"/T7/ChronicCare/GetChronicCareJL",{
      params: {
        ResidentFiles_Id: ResidentFiles_Id.value
      }
    })
    .then(response => {
      if (response.data.code === 210) {
        tableData.value = response.data.data;
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  } 
// 日期格式化
const formatDate = (dateString:any) => {
  const date = new Date(dateString)
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}

//添加慢病诊疗记录弹窗
const dialogFormVisible = ref(false)
//添加记录的参数
const JLform = reactive({
    "hospital": "",
    "status": "",
    "residentFiles_Id": route.query.residentFiles_Id as unknown as number
})
// 添加慢病诊疗记录
const AddJL=()=>{
    axios.post(apiUrl+'/T8/ChronicCare/AddChronicCareJL', JLform).then(res => {
        if (res.data.code == 212) {
          ElMessage.success(res.data.msg);
          dialogFormVisible.value = false;
          fetchData();
        }
    })
}

//就诊信息
const  JZform = reactive({
  "westernMedicineDiagnosis": "",
  "suggestion": "",
  "physicalsigns": "",
  "examinations": "",
  "inspections": "",
  "prescriptions": "",
  "residentFiles_Id": route.query.residentFiles_Id as unknown as number
})
// 就诊信息提交表单
const onSubmit = () => {
  if(JZform.westernMedicineDiagnosis === '')
{
  ElMessage.error('请填写西药诊断')
  return;
}
if(JZform.suggestion === '')
{
  ElMessage.error('建议不能为空')
  return;
}
if(JZform.physicalsigns === '')
{
  ElMessage.error('体征不能为空')
  return;
}
if(JZform.examinations === '')
{
  ElMessage.error('检验不能为空')
  return;
}
if(JZform.inspections === '')
{
  ElMessage.error('检查不能为空')
  return;
}
if(JZform.prescriptions === '')
{
  ElMessage.error('处方不能为空')
  return;
}
axios.post(apiUrl+'/T8/ChronicCare/AddMedicalVisitInf', JZform).then(res => {
  if (res.data.code == 212) {
    ElMessage.success(res.data.msg);
     // 清空表单核心代码
    JZform.westernMedicineDiagnosis = "";
    JZform.suggestion = "";
    JZform.physicalsigns = "";
    JZform.examinations = "";
    JZform.inspections = "";
    JZform.prescriptions = "";
  }
  else
  {
    ElMessage.error(res.data.msg);

  }
})

}
//取消按钮
const quxiao = () => {
  JZform.westernMedicineDiagnosis = "";
  JZform.suggestion = "";
  JZform.physicalsigns = "";
  JZform.examinations = "";
  JZform.inspections = "";
  JZform.prescriptions = "";
}

//复诊计划数据
const FZtableData  = ref([])
//查询复诊计划
const fetchFZData = async () => {
  ResidentFiles_Id.value = route.query.residentFiles_Id as unknown as number;
  await axios.get(apiUrl+'/T7/ChronicCare/GetFollowUpPlan',{
    params: {
      ResidentFiles_Id: ResidentFiles_Id.value
    }
  })
  .then(response => {
    if (response.data.code === 210) {
      FZtableData.value = response.data.data;
}
  })
}
//复诊计划添加弹窗
const FZdialogFormVisible  =ref(false)
//复诊计划参数
const FZJLform = reactive({
  "followUpDepartment": "",
  "followUpPurpose": "",
  "residentFiles_Id":route.query.residentFiles_Id as unknown as number
})
//添加复诊计划
const AddFZJH=()=>{
  axios.post(apiUrl+'/T8/ChronicCare/AddFollowUpPlan', FZJLform).then(res => {
    if (res.data.code == 212) {
      ElMessage.success(res.data.msg);
      FZdialogFormVisible.value = false;
      fetchFZData();
    }
  })
}

//删除复诊计划
const DelFZJH = (id:number)=>{
  ElMessageBox.confirm(
    '确认删除这一条数据嘛?',
    '警告!警告!',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete(apiUrl+'/T8/ChronicCare/DelFollowUpPlan',{
    data:{
      followUpPlanId:id
    }
  } ).then(res => {
    if (res.data.code == 204) {
      ElMessage.success(res.data.msg);
      fetchFZData();
    }
  })
    
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功！',
      })
    })

}


//#endregion

//#region 签约信息
const qianyueinfo = reactive({
  sign_StartTime: "",
  sign_EndTime: "",
  teamName:"",
  doctor:"",
  manageNCD:"",
  manageLevel:"",
  proof:""
})
//分页参数
const page = reactive({
  PageIndex:1,
  PageSize:10,
  totalCount:0,
  totalPage:0
})
const getQianYueInfo = async () => {
  ResidentFiles_Id.value = route.query.residentFiles_Id as unknown as number;
  await axios.get(apiUrl+'/T7/Sign/GetResidentFilesList',{
    params: {
      ResidentFiles_Id: ResidentFiles_Id.value,
      PageIndex: page.PageIndex,
      PageSize: page.PageSize
    }
  })
  .then(response => {
    if (response.data.code === 210) {
      //Object.assign(qianyueinfo, response.data.list);
      Object.assign(qianyueinfo, response.data.list[0]);
      console.log("签约信息:",qianyueinfo)
      page.totalCount = response.data.totalCount;
      page.totalPage = response.data.totalPage;       
      console.log("签约信息分页:",page)   
    }
  })
}
//服务包数据
const FWtableData = ref([])
const getServicePackage = async () => {
  axios.get(apiUrl+'/T7/Sign/GetServicesPack').then(res=>{
    if (res.data.code == 210) {
      FWtableData.value = res.data.data;
    }
  })
}

//设备数据
const SBtableData = ref([])
//查询绑定设备
const getSBData  = async () => { 
  ResidentFiles_Id.value = route.query.residentFiles_Id as unknown as number;
axios.get(apiUrl+"/T7/Sign/GetSignDeviceBindList",{
  params:{
    ResidentFiles_Id:ResidentFiles_Id.value
  }
}).then(res=>{
  if (res.data.code == 210) {
    SBtableData.value = res.data.data;
  }
})
}


//#endregion




//初始化数据
onMounted(() => {
  getResidentDetail();//总览
  fetchChartData()//折线图和监测数据
  if (chartData.value.dates.length) {
    initChart()
  }
  
  fetchData();//慢病诊疗记录
  fetchFZData();//复诊计划
  getQianYueInfo();//签约信息
  getServicePackage();//服务包
  getSBData();///设备
});
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
  background: #fff;
}

.personal-info h2 {
  margin-bottom: 12px;
}

.basic-info {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.divider {
  margin: 0 8px;
  color: #ddd;
}

.tags-section h3,
.risk-assessment h3,
.service-info h3 {
  color: #333;
  margin-bottom: 12px;
  font-size: 16px;
}

.health-item {
  margin: 8px 0;
  font-size: 14px;
}

.service-item {
  margin: 12px 0;
  font-size: 14px;
}

.service-item label {
  color: #666;
  margin-right: 8px;
}

.compliance {
  text-align: center;
  padding: 20px 0;
}
.side-menu {
  width: 200px;
  background: #f5f7fa;
  padding: 20px 0;
}
.time-filter {
  margin-bottom: 15px;
}
.monitor-record {
  border: 1px solid #ebeef5;
  margin-top: 10px;
}
#trend-chart {
  height: 300px !important; /* 强制高度，防止被覆盖 */
  width:800px;
}
.medical-records-container {
  padding: 20px;
  background: #f8f9fa;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  color: #333;
}

.add-btn {
  background: #409eff;
  border-color: #409eff;
}

.el-table {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-table th) {
  background-color: #f5f7fa !important;
  color: #606266;
}

:deep(.el-table td) {
  padding: 12px 0;
}
</style>